<template>
  <!-- 查询 -->
  <el-form :inline="true" :model="infor" class="demo-form-inline">
    <table>
      <tr>
        <td>
          <el-form-item label="姓名：">
            <el-input
              style="width: 200px"
              v-model="infor.employeeName"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="部门：">
            <el-select
              style="width: 180px"
              v-model="infor.departmentName"
              placeholder="全部"
              clearable
              @change="bumen"
            >
              <el-option
                v-for="item in Department"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="职位:">
            <el-select
              style="width: 180px"
              v-model="infor.postsName"
              placeholder="全部"
              clearable
              @change="zhiwei"
            >
              <el-option
                v-for="item in Position"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="到岗日期:">
            <el-date-picker
              v-model="infor.dateonBoard"
              type="date"
              placeholder="Pick a date"
              clearable
            />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="申请日期:">
            <el-date-picker
              v-model="infor.createDate"
              type="date"
              placeholder="Pick a date"
              clearable
            />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="审批状态:">
            <el-select
              style="width: 180px"
              v-model="infor.approvalDimission"
              placeholder="全部"
              clearable
            >
              <el-option label="待提交" value="1" />
              <el-option label="待审批" value="2" />
              <el-option label="已同意" value="3" />
              <el-option label="已拒绝" value="4" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>
          <el-form-item style="float-right">
            <el-button type="primary" @click="GetDimission">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </td>
      </tr>
    </table>
  </el-form>
  <!-- 列表 -->
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="employeeName" label="姓名" />
    <el-table-column prop="departmentName" label="部门" />
    <el-table-column prop="postsName" label="职位" />
    <el-table-column prop="superstratumCharge" label="上级负责人" />
    <el-table-column prop="dateonBoard" label="入职日期">
      <template v-slot="scope">
        {{ scope.row.dateonBoard.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column prop="createDate" label="申请日期">
      <template v-slot="scope">
        {{ scope.row.createDate.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column prop="approvalEntry" label="审批状态">
      <template v-slot="scope">
        {{
          scope.row.approvalRegularization == 1
            ? "待提交"
            : scope.row.approvalRegularization == 2
            ? "待审核"
            : scope.row.approvalRegularization == 3
            ? "已通过"
            : "已拒绝"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="createDate" label="创建日期">
      <template v-slot="scope">
        {{ scope.row.createDate.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column label="审批人" prop="shenPiName" />
    <el-table-column label="操作" width="230px">
      <template v-slot="scope">
        <a
          @click="
            tiaoc(
              scope.row.regularizationId,
              scope.row.approvalRegularization,
              scope.row.employeeNameId
            )
          "
          >查看</a
        >
        &nbsp;
        <el-button
          type="primary"
          :disabled="scope.row.approvalRegularization > 2"
          @click="spupdate(scope.row.entryId, 3, scope.row.employeeNameId)"
          >通过</el-button
        >
        <el-button
          type="primary"
          :disabled="scope.row.approvalRegularization > 2"
          @click="spupdate(scope.row.entryId, 4, scope.row.employeeNameId)"
          >拒绝</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination
      v-model:current-page="infor.pageindex"
      v-model:page-size="infor.pagesize"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="infor.listcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox, type ComponentSize } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
const tableData = ref([])
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
onMounted(() => {
  GetDimission();
})
const tijiao = (id: number) => {
  axios({
    method: "post",
    url: "empwrite/api/Resign/UpdateStateResgin",
    data: {
      id: id
    }
  })
    .then(res => {
      if (res.data.data > 0) {
        ElMessage.success("提交成功")
        GetDimission();
      }
      else {
        ElMessage.error("提交失败")
      }
    })
}
//分页
const handleSizeChange = (val: number) => {
  infor.value.pagesize = val;
  GetDimission();
}
const handleCurrentChange = (val: number) => {
  infor.value.pageindex = val;
  GetDimission();
}
const chakan = (id: number) => {
  router.push({
    path: "/ResignUpdate",
    query: {
      id: id
    }
  })
}
const infor = ref({
  employeeName: "",
  departmentName: "",
  postsName: "",
  dateonBoard: "",
  createDate: "",
  approvalDimission: "",
  pageindex: 1,
  pagesize: 5,
  pagecount: 0,
  listcount: 0
})
const Department = ref([
  { label: 'CEO', value: 1 },
  { label: '财务部', value: 2 },
  { label: '运营部', value: 3 },
  { label: '人事部', value: 4 },
  { label: '策划部', value: 5 },
])

const Positions = ref([
  { label: '董事长', value: 1 },
  { label: '财务部长', value: 2 },
  { label: '运营部长', value: 3 },
  { label: '人事部长', value: 4 },
  { label: '策划部长', value: 5 },
])
const Position = ref([]);
const bumen = (id: number) => {
  Position.value = Positions.value.filter(positions => positions.value == id);
  const selectedPosition = Department.value.find(position => position.value === id);
  if (selectedPosition) {
    infor.value.departmentName = selectedPosition.label;
  }
}
const zhiwei = (id: number) => {
  const selectedPosition = Positions.value.find(position => position.value === id);
  if (selectedPosition) {
    infor.value.postsName = selectedPosition.label;
  }
}
const JumptoNew = () => {
  router.push("/ResignAdd")
}
const GetDimission = () => {
  axios({
    method: "get",
    url: "empread/api/LoginShow/GetRegularizationApp",
    params: {
      employeeName: infor.value.employeeName,
      departmentName: infor.value.departmentName,
      postsName: infor.value.postsName,
      dateonBoard: infor.value.dateonBoard,
      createDate: infor.value.createDate,
      approvalDimission: infor.value.approvalDimission || 0,
      pageindex: infor.value.pageindex,
      pagesize: infor.value.pagesize
    }
  })
    .then(res => {
      tableData.value = res.data.data.plist
      console.log(tableData.value)
      infor.value.pagecount = res.data.data.pagecount
      infor.value.listcount = res.data.data.plistcount
    })
}
const resetForm = () => {
  infor.value.employeeName = ""
  infor.value.departmentName = ""
  infor.value.postsName = ""
  infor.value.createDate = ""
  infor.value.approvalDimission = ""
}
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}

const tiaoc=(id:number,status:number,employeeNameId:number)=>{
  console.log(status)
    if(status==2){
        router.push({
            name: "RegularizationUpdateApp",
            query: {
                id: id,
                employeeNameId:employeeNameId
            }
        })
    }else if(status==3||status==4){
        router.push({
            name: "RegularizationTj",
            query: {
                id: id,
                status:status
            }
        })
    }
}


const spupdate=(id:number,status:number,employeeNameId:number)=>{
        axios.post("empwrite/api/Regularization/RegularizationUpdateApp",{
          regularizationId:id,
          approvalEntry:status,
          employeeId:employeeNameId
        })
        .then(res=>{
            if(res.data.data>0){
              ElMessage.success("修改成功")
              GetDimission()
            }
            else{
              ElMessage.error("修改失败")
            }
        })
}
</script>
